<template>
    <div ref="contextMenu" class="context-menu">
        <slot></slot>
        <ul v-size-ob="handelSize" v-show="show" id="context-menu-box" class="context-menu-box"
            :style="{ left: posXY.x + 'px', top: posXY.y + 'px' }">

            <li v-for="item in menu" :key="item.action" @click="handleMenuClick(item)">{{ item.label }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        menu: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            x: 0,
            y: 0,
            vh: '',
            vw: '',
            show: false,
            width: 0,
            height: 0,
        }
    },
    created() {
        window.addEventListener("resize", () => {
            this.vh = document.documentElement.clientHeight;
            this.vw = document.documentElement.clientWidth;
        });
    },

    mounted() {
        const menuBox = document.querySelector("#context-menu-box");
        if (menuBox) {
            this.appendDomToRoot(menuBox);
        }
        const div = this.$refs.contextMenu
        console.log(div);
        
         div.addEventListener("contextmenu",this.handleContextMenu)
         window.addEventListener("click",this.hideContextMenu,true)
         window.addEventListener("contextmenu",this.hideContextMenu,true)

    },
     computed: {
        posXY() {
          let x= this.x
          let y= this.y
          if(x>this.vw-this.width){
            x = this.x-this.width
          }
          if(y>this.vh-this.height){
            y = this.vh-this.height
          }
          return {x,y}

        },
    },
    methods: {
        handelSize(e) {
            this.width = e.width
            this.height = e.height
        },
        handleContextMenu(e) {
            e.preventDefault();
            e.stopPropagation();
            this.x = e.clientX;
            this.y = e.clientY;
            //处理边界情况
            this.show = true;
        },

        handleMenuClick(item) {
            this.$emit('select', item.action);
            this.hideContextMenu();
        },

        hideContextMenu() {
            this.show = false;
        },

        appendDomToRoot(el, selector) {
            //el 为要操作的dom元素，selector为要插入的根节点的选择器，为空的话，直接插入到body中 
            var container;
            if (selector) {
                container = document.querySelector(selector);
            }
            if (!container) {
                container = document.body;
            }
            container.appendChild(el);
        },
    },

    beforeDestroy() {
        // 组件销毁前移除元素和事件监听器
        const dev = this.$refs.contextMenu;
        div.addEventListener("contextmenu",this.handleContextMenu)
         window.addEventListener("click",this.hideContextMenu,true)
         window.addEventListener("contextmenu",this.hideContextMenu,true)
    }
}
</script>

<style scoped>
.context-menu-box {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px 0;
    min-width: 120px;
}

.context-menu-box li {
    list-style: none;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.context-menu-box li:hover {
    background-color: #f5f5f5;
}
</style>